<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>选择生产计划</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" th:href="@{/favicon.ico}">
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/font-awesome.css}" rel="stylesheet">
    <link th:href="@{/css/animate.css}" rel="stylesheet">
    <link th:href="@{/css/style.css}" rel="stylesheet">
    <link th:href="@{/self/self-common.css}" rel="stylesheet">

    <link th:href="@{/css/plugins/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet">
    <link th:href="@{/css/plugins/bootstrap-select/bootstrap-select.css}" rel="stylesheet">

    <!-- Sweet Alert -->
    <link th:href="@{/css/plugins/sweetalert/sweetalert.css}" rel="stylesheet">
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12 search-card">
            <div class="ibox">
                <div class="ibox-content">
                    <form class="form-inline">
                        <div class="form-group searchCX">
                            <input id="queryPlanSn" class="form-control" type="text" placeholder="请输入计划编号" clearable>
                        </div>

                        <div class="form-group">
                            <input id="queryProductName" class="form-control" type="text" placeholder="请输入产品名称" clearable>
                        </div>


                        <div class="form-group">
                            <div class="kssj">
                                <input id="queryPlanStart" class="form-control layer-date startDate" placeholder="创建时间(起)"
                                       autocomplete="off">
                            </div>
                        </div>
                        <div class="form-group">~</div>
                        <div class="form-group">
                            <div class="jssj">
                                <input id="queryPlanEnd" class="form-control layer-date endDate" placeholder="创建时间(止)"
                                       autocomplete="off" style="margin-right: 10px;">
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="kssj">
                                <input id="queryFinishStart" class="form-control layer-date startDate" placeholder="计划结束时间(起)"
                                       autocomplete="off">
                            </div>
                        </div>
                        <div class="form-group">~</div>
                        <div class="form-group">
                            <div class="jssj">
                                <input id="queryFinishEnd" class="form-control layer-date endDate" placeholder="计划结束时间(止)"
                                       autocomplete="off">
                            </div>
                        </div>

                        <div class="form-group">
                            <button id="btnSearchPlan" class="btn btn-success" type="button" onclick="queryPlan()">
                                <i class="fa fa-search"></i>
                                查询
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-sm-12 table-card">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>
                        <i class="fa fa-bookmark"></i>
                        生产计划列表
                    </h5>
                </div>
                <div class="ibox-content">
                    <table id="dataTable" data-mobile-responsive="true"></table>
                </div>
            </div>
        </div>
    </div>


</div>


<!-- 全局js -->
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/content.js}"></script>
<script th:src="@{/js/app.js}" type="text/javascript"></script>

<!-- Bootstrap table -->
<script th:src="@{/js/plugins/bootstrap-table/bootstrap-table.min.js}"></script>
<script th:src="@{/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js}"></script>
<script th:src="@{/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>
<!--提示框-->
<script th:src="@{/js/plugins/layer/layer.min.js}"></script>
<!--下拉选择框-->
<script th:src="@{/js/plugins/bootstrap-select/bootstrap-select.js}"></script>
<!--日期-->
<script th:src="@{/js/plugins/layer/laydate/laydate.js}"></script>

<!--bootstrap导出-->
<script th:src="@{/js/plugins/bootstrap-table-export/bootstrap-table-export.js}"></script>
<script th:src="@{/js/plugins/bootstrap-table-export/tableExport.js}"></script>
<!--pdf导出 文本乱码问题-->
<script th:src="@{/js/plugins/bootstrap-table-export/pdfmake/pdfmake.min.js}"></script>
<script th:src="@{/js/plugins/bootstrap-table-export/pdfmake/gbsn00lp_fonts.js}"></script>
<!--将表导出为PDF文件-->
<script th:src="@{/js/plugins/bootstrap-table-export/pdfmake/jspdf.min.js}"></script>
<script th:src="@{/js/plugins/bootstrap-table-export/pdfmake/jspdf.plugin.autotable.js}"></script>

<script th:src="@{/js/plugins/sweetalert/sweetalert.min.js}"></script>

<script>

    var planId = '';
    var planSn = '';
    var productSn = '';
    var productName = '';

    function querySearch(){
        $('#dataTable').bootstrapTable('refresh');
    }

    $(document).ready(function () {
        function queryParams(params) {
            return {
                pageSize: params.pageSize,
                pageNumber: params.pageNumber,
                planSn:$("#queryPlanSn").val(),
                productId:'',
                planState:"3",
                planBeginTime:$("#queryPlanStart").val(),
                planEndTime:$("#queryPlanEnd").val(),
                finishBeginTime:$("#queryFinishStart").val(),
                finishEndTime:$("#queryFinishEnd").val(),
                productName:$("#queryProductName").val()
            }
        }

        $('#dataTable')
            .bootstrapTable({
                url: baseUrl + "planPageInfo",
                method: "post",
                queryParamsType: "",
                queryParams: queryParams,
                pageNumber: 1, //初始化加载第一页，默认第一页
                pageSize: 10, //每页的记录行数（*）
                // order: "asc",
                striped: true, //是否显示行间隔色
                cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                search: false, //是否显示搜索框功能
                pagination: true, //是否分页
                showRefresh: true, //是否显示刷新功能
                showToggle: true,
                showColumns: true,
                clickToSelect: true, //是否启用点击选中行
                // uniqueId: "indentId", //每一行的唯一标识，一般为主键列
                idField: "id",
                formatSearch: function () {
                    return "计划名称";
                },
                iconSize: 'outline',
                sidePagination: "server", //服务端请求
                showExport: true,//显示导出按钮
                buttonsAlign: "right",  //按钮位置
                exportTypes: ['pdf'],  //导出文件类型
                pageList: [10, 20, 30, 'all'],
                exportDataType: "basic",//导出类型 'basic':当前页, 'all', 'selected'.
                toolbar: '#toolbar', //工具按钮用哪个容器
                icons: {
                    refresh: 'glyphicon-repeat',
                    toggle: 'glyphicon-list-alt',
                    columns: 'glyphicon-list',
                    export: 'glyphicon-export'
                }
                , responseHandler: function (res) {
                    console.log(res)
                    var rows = [];
                    if (res.total !== 0) {
                        rows = res.list;
                    }
                    var result = {
                        rows: rows,
                        total: res.total
                    };
                    return result;
                },
                onEditableSave: function (field, row, oldValue, $ele) {
                    //  todo  更新数据到数据库
                },
                columns: [
                   {
                        field: 'planSn',
                        title: '计划编号'
                    }, {
                        field: 'planName',
                        title: '计划名称'
                    }, {
                        field: 'productSn',
                        title: '产品编号'
                    }, {
                        field: 'productName',
                        title: '产品名称'
                    },
                    {
                        field: 'unitName',
                        title: '单位'
                    },
                    {
                        field: 'planWeight',
                        title: '计划量'
                    }, {
                        field: 'finishWeight',
                        title: '完成量'
                    }, {
                        field: 'lossWeight',
                        title: '合理损耗'
                    },  {
                        field: 'startConfigDate',
                        title: '计划配制开始日期'
                    }, {
                        field: 'finishConfigDate',
                        title: '计划配制完成日期'
                    },
                    {
                        field: 'startFillingDate',
                        title: '计划灌装开始日期'
                    }, {
                        field: 'finishFillingDate',
                        title: '计划灌装完成日期'
                    },
                    {
                        field: 'startFillingDate',
                        title: '计划包装开始日期'
                    }, {
                        field: 'finishFillingDate',
                        title: '计划包装完成日期'
                    },

                    {
                        field: 'fillingLineName',
                        title: '灌装线'
                    }, {
                        field: 'packageLineName',
                        title: '包装线'
                    },

                    {
                        field: 'createUserName',
                        title: '创建人'
                    }, {
                        field: 'createTime',
                        title: '创建时间'
                    }
                ],
                onClickRow: function(row, $element) {
                    $('.info').removeClass('info');
                    $($element).addClass('info');
                    planId = row.id;
                    planSn = row.planSn;
                    productSn = row.productSn;
                    productName = row.productName;

                }
            });

    });


    var submit = function ()
    {
        if(planId == "")
        {
            layer.msg("请选择一条生产计划");
            return '';
        }
        var param = {
            planId: planId,
            planSn:planSn,
            productSn:productSn,
            productName:productName
        };

        return JSON.stringify(param);
    }

</script>

</body>

</html>


